<div class="devui-demo-container" dAnchorBox dAnchorHashSupport [view]="{ top: 180, bottom: 0 }">
  <d-demo-nav [navItems]="navItems"></d-demo-nav>
  <div class="devui-demo-example" [dAnchor]="'basic-usage'">
    <div class="devui-demo-title">{{ 'components.ImagePreview.basicDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.ImagePreview.basicDemo.description' | translate }}</div>
    <d-codebox id="components-image-preview-default" [sourceData]="basicSource">
      <d-image-preview-basic demo></d-image-preview-basic>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'custom-usage'">
    <div class="devui-demo-title">{{ 'components.ImagePreview.customDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.ImagePreview.customDemo.description' | translate }}</div>
    <d-codebox id="components-image-preview-custom-open" [sourceData]="customOpen">
      <d-image-preview-custom-open demo></d-image-preview-custom-open>
    </d-codebox>
  </div>
  <div class="devui-demo-example" [dAnchor]="'z-index-usage'">
    <div class="devui-demo-title">{{ 'components.ImagePreview.zIndexDemo.title' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.ImagePreview.zIndexDemo.description1' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.ImagePreview.zIndexDemo.description2' | translate }}</div>
    <div class="devui-demo-text">{{ 'components.ImagePreview.zIndexDemo.description3' | translate }}</div>
    <d-codebox id="components-image-preview-z-index" [sourceData]="zIndexSource">
      <d-image-preview-z-index demo></d-image-preview-z-index>
    </d-codebox>
  </div>
</div>
